﻿<template>
  <div class="box_e" style="position: relative">
    <!-- <div class="carousel-today" style="color: hsl(197, 98%, 65%)">{{ today }}</div> -->
    <div class="carousel-wrapper" v-if="noticeListData.length">
      <vue-seamless-scroll :data="noticeListData" :class-option="optionSetting" style="height: 100%; overflow: hidden">
        <ul class="item" style="list-style: none; padding: 0px; margin: 0px">
          <li
            v-for="(item, index) in noticeListData"
            :key="index"
            :data-index="index"
            style="padding: 0px; margin: 0px; font-size: small; list-style: none; text-align: left; line-height: 20px"
          >
            <div
              v-if="index % 2 == 0"
              style="
                background: rgba(35, 4, 194, 0.15);
                height: 100%;
                width: 100%;
                padding: 6px;
                border-bottom: 1px solid rgb(170, 221, 255, 0.8);
                box-shadow: 0;
              "
            >
              <img src="~@/assets/images/car-yellow.png" class="v_atlas" style="width: 20px; margin: 3px 10px 0 5px" />
              <span
                style="color: rgb(170, 221, 255); padding: 2px 4px"
                :data-index="index"
                :style="{ cursor: item.showDetailBtn ? 'pointer' : null }"
              >
                {{ noticeListName[index] }}
              </span>
              <span
                style="color: rgb(170, 221, 255); padding: 0 10px"
                :data-index="index"
                :style="{ cursor: item.showDetailBtn ? 'pointer' : null }"
              >
                {{ item }}
              </span>
              <span
                style="color: #fff; padding: 2px 4px"
                :data-index="index"
                :style="{ cursor: item.showDetailBtn ? 'pointer' : null }"
              >
                {{ noticeListNum[index] }}
              </span>
            </div>
            <div
              v-else
              style="
                height: 100%;
                width: 100%;
                padding: 6.5px;
                border-bottom: 1px solid rgb(170, 221, 255, 0.8);
                box-shadow: 0;
              "
            >
              <img src="~@/assets/images/car-blue.png" class="v_atlas" style="width: 20px; margin: 3px 10px 0 5px" />
              <span
                style="color: rgb(170, 221, 255); padding: 2px 4px"
                :data-index="index"
                :style="{ cursor: item.showDetailBtn ? 'pointer' : null }"
              >
                {{ noticeListName[index] }}
              </span>
              <span
                style="color: rgb(170, 221, 255); padding: 0 10px"
                :data-index="index"
                :style="{ cursor: item.showDetailBtn ? 'pointer' : null }"
              >
                {{ item }}
              </span>
              <span
                style="color: #fff; padding: 2px 4px"
                :data-index="index"
                :style="{ cursor: item.showDetailBtn ? 'pointer' : null }"
              >
                {{ noticeListNum[index] }}
              </span>
            </div>
          </li>
        </ul>
      </vue-seamless-scroll>
    </div>
    <div v-else class="flex flex-center" style="height: 100%; color: #ccc">
      <span>暂无数据</span>
    </div>
  </div>
</template>
<script>
import VueSeamlessScroll from '@/utils/vueSeamlessScroll/vue-seamless-scroll.min.js'
import dayjs from 'dayjs'
export default {
  components: {
    VueSeamlessScroll
  },
  name: 'box-left-e',
  data() {
    return {
      // 消息提示滚动配置
      optionSetting: {
        step: 0.4,
        limitMoveNum: 7,
        openTouch: false,
        waitTime: 1,
        singleHeight: 10
      },
      today: dayjs().format('YYYY-MM-DD'),
      titlename: '本日应交货',
      noticeListName: [
        '京鸿志',
        '京鸿志',
        '京鸿志',
        '京鸿志',
        '富其扬',
        '海泓彩印',
        '中天迅通',
        '香港联达',
        'LeadForce',
        '东方小飞',
        '华富洋',
        '联达兴',
        '顶尖电子S',
        '格雷维尔',
        '力优包装',
        '中天迅通',
        '三甲鼎',
        '联达兴',
        '欧陆通',
        '麦辰'
      ],
      noticeListData: [
        'WSX-1004020241 贴片电阻',
        'WSX-1004022402 贴片电阻',
        'WSX-1010459102	贴片电容',
        'WVER-1030010008	贴片电感',
        'WHKLD-99.6540	散热器',
        'WFN-110011130	纸箱',
        'WVER-1090020203	天线',
        'WHKLD-99.1300 	发光二极管',
        'WFN-107040027	驱动芯片',
        'WFN-111011314	塑料结构件',
        'WVER-1060010303	电源芯片',
        'WZWHKLD-3100    晶振',
        'WVER-1070050011	打印机芯',
        'WSX-1070010031	X990 磁头',
        'WFN-110030077	塑料袋',
        'WFN-102020148	识读模组',
        'WFN-110011129	纸箱\\纸盒',
        'WHKLD-99.4100 	固态硬盘',
        'WFN-102060173	电源适配器',
        'WVER-1080030024	FPC座'
      ],
      noticeListNum: [
        '10000 PCS',
        '20000 PCS',
        '30000 PCS',
        '180000 PCS',
        '8000 PCS',
        '12000 PCS',
        '15000 PCS',
        '30000 PCS',
        '30000 PCS',
        '24000 PCS',
        '85000 PCS',
        '6000 PCS',
        '30000 PCS',
        '5000 PCS',
        '30000 PCS',
        '15700 PCS',
        '2000 PCS',
        '2433 PCS',
        '7000 PCS',
        '594000 PCS'
      ]
    }
  },
  methods: {},
  watch: {}
}
</script>
<style scoped>
@charset "UTF-8";
.box_e {
  height: 270px;
  overflow: hidden;
}

.carousel-today {
  position: absolute;
  top: -15px;
  right: 16px;
  color: #a2e8ff;
}

.carousel-wrapper {
  padding: 8px;
}
.carousel-wrapper li {
  padding: 8px;
  margin-bottom: 8px;
  display: flex;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}
.carousel-wrapper .title {
  font-size: 14px;
  font-family: '微软雅黑';
  color: #303133;
  flex: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.carousel-wrapper .title:hover {
  color: #1890ff;
}
.carousel-wrapper .more {
  font-size: 12px;
  color: #4a92d4ec;
  flex: 0 0 52px;
  text-align: right;
  margin-right: -8px;
  cursor: pointer;
}
.carousel-wrapper .more:hover {
  color: #1890ff;
  font-weight: 600;
}
</style>
